<template>
  <MainLayout>
    <div
      v-if="Object.keys(author).length!==0"
      ref="content"
      class="pt-[90px] 2xl:pl-[185px] lg:pl-[160px] lg:pr-0 pr-2 w-[calc(100%-90px)] max-w-[1800px] 2xl:mx-auto overflow-x-hidden"
    >
      <div class="flex w-[calc(100vw-230px)]">
        <img
          class="max-w-[120px] rounded-full"
          :src="author.avatar_thumb.url_list[0]"
        >
        <div class="ml-5 w-full">
          <div class="text-[30px] font-bold truncate">
            {{ author.nickname }}
          </div>
          <div class="text-[18px] truncate">
            {{ author.nickname }}
          </div>
        </div>
      </div>

      <div class="flex items-center pt-4">
        <div class="mr-4">
          <span class="font-bold">10K</span>
          <span class="text-gray-500 font-light text-[15px] pl-1.5">Following</span>
        </div>
        <div class="mr-4">
          <span class="font-bold">44K</span>
          <span class="text-gray-500 font-light text-[15px] pl-1.5">Followers</span>
        </div>
        <div class="mr-4">
          <span class="font-bold">{{ 200 }}</span>
          <span class="text-gray-500 font-light text-[15px] pl-1.5">Likes</span>
        </div>
      </div>

      <div class="pt-4 mr-4 text-gray-500 font-light text-[15px] pl-1.5 max-w-[500px]">
        {{ author.nickname }}
      </div>

      <div class="w-full flex items-center pt-4 border-b">
        <div class="w-60 text-center py-2 text-[17px] font-semibold border-b-2 border-b-black">Videos</div>
        <div class="w-60 text-gray-500 text-center py-2 text-[17px] font-semibold">
          <Icon name="icon-jiesuo" style="display: inline"/>
          Liked
        </div>
      </div>
      <div class="mt-4 grid 2xl:grid-cols-6 xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-3 pb-3">
        <div v-if="show" v-for="(post,index) in list" :key="index">
          <PostSecondUser :post="post" v-if="post&&post.video&&post.video.play_addr.url_list.length!==0" :key="index"
                          :index="index"/>
        </div>
      </div>
      <div v-show="isShow"
           @click="backTop"
           class="fixed bottom-10 border border-gray-200 right-10 rounded-full flex justify-center items-center  bg-gray-100 text-center cursor-default w-[60px] h-[60px]">
        UP
      </div>
    </div>
  </MainLayout>
</template>

<script>
import MainLayout from '~/layouts/MainLayout.vue';

export default {
  components: {MainLayout},
  name: 'user',
  data() {
    return {
      show: false,
      list: [],
      isShow: false,
      max_cursor: 0,
      isLoading: false,
      scrollTop: 0,
      has_more: 1
    }
  },
  computed: {
    author() {
      if (this.list && this.list.length !== 0) {
        return this.list[0].author || {}
      }
      return {};
    }
  },
  filters: {
    allLowerCaseNoCaps(str) {
      return str.split(' ').join('').toLowerCase()
    },
    million: function (value) {
      let num;
      if (value > 9999) {
        num = (Math.floor(value / 1000) / 10) + '万';
      } else if (value < 9999 && value > -9999) {
        num = value
      } else if (value < -9999) {
        num = -(Math.floor(Math.abs(value) / 1000) / 10) + '万'
      }
      return num;
    }
  },
  watch: {
    list: {
      handler() {
        setTimeout(() => this.show = true, 300)
      }, immediate: true
    },
    scrollTop: {
      handler(newVal) {
        this.isShow = newVal >= 600;
      }, immediate: true
    },
    '$route.query.id': {
      async handler() {
        await this.getData()
      }
    },
  },
  async mounted() {
    this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    this.bindScroll()
    await this.getData()
  },
  destroyed() {
    this.clearScroll()
  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    },
    scrollHande() {
      if (this.isLoading || this.has_more == 0) return
      let scrollH = document.documentElement.scrollHeight
      let innerH = window.innerHeight
      let top = document.body.scrollTop || document.documentElement.scrollTop
      this.scrollTop = top
      if (scrollH - top - innerH < 200) {
        this.getData(true);
      }
    },
    bindScroll() {
      window.addEventListener('scroll', this.scrollHande)
    },
    clearScroll() {
      window.removeEventListener('scroll', this.scrollHande)
    },
    async getData(flag) {
      if (!this.$route.query.id) return;
      try {
        this.isLoading = true;
        let res = await this.$axios({
          method: 'get',
          withCredentials: false,
          url: `http://127.0.0.1:4500/getPost?sec_user_id=${this.$route.query.id}&max_cursor=${this.max_cursor}`,
        })
        this.isLoading = false
        this.max_cursor = res.data.data.max_cursor
        this.has_more = res.data.data.has_more
        if (flag) {
          if (res.data.data.aweme_list.length !== 0) {
            this.list = this.list.concat(res.data.data.aweme_list)
            this.$store.commit('post/setVideo', this.list)
          }
          return;
        }
        this.list = res.data.data.aweme_list
        this.$store.commit('post/setVideo', this.list)
      } catch (e) {

      }
    }
  },

}
</script>
